<template>
    <div>
        <a-modal
            :visible="visible"
            title="选择报销类型"
            :width="700"
            :footer="false"
            @cancel="visible = false"
            wrapClassName="internalControl-staging-selectIncrease-modal">
            <div style="display: flex;flex-direction: row;">
                <div class="internalControlStaging-modal-div" style="margin-right: 6px;">
                    <h2>一般报销</h2>
                    <div class="internalControlStaging-modal-div-left">
                        <div v-for="(item,index) in menus2" :key="index" class="toDoTasks-annual-for" @click="generalReimbursementClick(item.addStr)">
                            <div class="at-y-icon" :class="'at-y-bg'+index">
                                <ych-icon v-if="item.icon && item.icon.indexOf('spcy-icon') == -1" :type="item.icon" />
                                <span v-else :class="'iconfont '+item.icon"></span>
                            </div>
                            <span class="at-y-title">{{ item.title }}</span>
                        </div>
                    </div>
                </div>
                <div class="internalControlStaging-modal-div">
                    <h2>差旅报销</h2>
                    <div class="internalControlStaging-modal-div-left">
                        <div class="toDoTasks-annual-for" @click="travelOnBusinessClick">
                            <div class="at-y-icon at-y-bg2">
                                <ych-icon type="credit-card" />
                            </div>
                            <span class="at-y-title">差旅报销</span>
                        </div>
                </div>
                </div>
            </div>
        </a-modal>
        <addModal v-show="false" ref="addModalRefRef" />
        <generalReimbursement ref="generalReimbursementRef" />
    </div>
</template>
<script>
import addModal from '../../addForm/index'
import generalReimbursement from '../generalReimbursement/index'
export default {
    components: {
        addModal,
        generalReimbursement
    },
    data() {
        return {
            visible: false,
            menus: [
                {
                    title: '一般报销',
                    icon: 'account-book',
                    addStr:'新增报销',
                },{
                    title: '差旅报销',
                    icon: 'credit-card',
                    addStr:'财务预算',
                }
            ],
            menus2: [
                {
                    title: '对公报销',
                    icon: 'account-book',
                    addStr:'对公报销',
                },{
                    title: '对私报销',
                    icon: 'credit-card',
                    addStr:'对私报销',
                }
            ]
        }
    },
    mounted() {
    },
    methods: {
        travelOnBusinessClick(){
            this.$refs.addModalRefRef.addFormClick('新增报销')
        },
        generalReimbursementClick(type){
            this.$refs.generalReimbursementRef.getData({modalTitle:type})
            this.$refs.generalReimbursementRef.visible = true
        }
    },
}
</script>
<style lang="less">
.internalControl-staging-selectIncrease-modal {
    height: 500px;
    .visibilitys {
        visibility: hidden;
    }
    .internalControlStaging-modal-div {
        border: 1px solid #e4e3e3;
        text-align: center;
        flex: 1;
        border-radius: 6px;
        padding: 10px;
    }
    .internalControlStaging-modal-div-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        justify-content: space-evenly;
        .toDoTasks-annual-for{
            .at-y-icon{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 80px;
                height: 80px;
                background: #e4d329;
                border-radius: 50%;
                font-size: 30px;
                color: #fff;
                .iconfont{
                    font-size: 30px;
                }
            }
            .at-y-title{
                font-size: 16px;
            }
            .at-y-bg1{
                background: #5077ee;
            }
            .at-y-bg2{
                background: #50ccee;
            }
            .at-y-bg3{
                background: #9c50ee;
            }
            .at-y2-bg4{
                background: #509aee;
            }
            .at-y2-bg5{
                background: #ee5068;
            }
            .at-y2-bg6{
                background: #eeb450;
            }
        }
    }

}

</style>
